<script setup>
import { computed } from 'vue';
import { useUserStore } from '@/stores/user';
import { useNow, useDateFormat } from '@vueuse/core';

const userStore = useUserStore()

const displayContent = computed(() => {
    if (userStore.userInfo) {
        return userStore.userInfo.nickName
    }
    return '未登录'
})

const timeFormatted = useDateFormat(useNow(), 'YYYY-MM-DD ddd HH:mm')

</script>

<template>
    <div class="bg-white shadow-md fixed top-0 left-0 right-0">
        <div class="w-full px-4 py-4 flex justify-between">
            <div class="font-bold" v-text="timeFormatted"></div>
            <div class="font-bold" v-text="displayContent"></div>
        </div>
    </div>
</template>